<template>
  <div class="content">
    <div class="pageSearchView">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline" label-width="auto" style="width: 100%">
        <el-row>
          <!--					<el-col :span="6">-->
          <!--						<el-form-item label="车间/产线">-->
          <!--							<el-tree-select v-model="searchParam.groupIds" :data="workRoomList" check-strictly-->
          <!--															:props="{ children: 'sonList', label: 'orgName', value: 'id' }" style="width: 250px"-->
          <!--															@change="organizationIdChange" />-->
          <!--						</el-form-item>-->
          <!--					</el-col>-->
          <!--					<el-col :span="6">-->
          <!--						<el-form-item label="设备" prop="equipmentList">-->
          <!--							<el-select v-model="searchParam.deviceIds" placeholder="请选择设备" filterable style="width: 240px">-->
          <!--								<el-option v-for="item in equipmentData" :key="item.id" :label="item.equipmentName" :value="item.id">-->
          <!--									<span style="float: left">{{ item.equipmentName }}</span>-->
          <!--									<span style="float: right; color: var(&#45;&#45;el-text-color-secondary); font-size: 13px;">-->
          <!--										{{ item.equipmentCode }}-->
          <!--									</span>-->
          <!--								</el-option>-->
          <!--							</el-select>-->
          <!--						</el-form-item>-->
          <!--					</el-col>-->
          <el-col :span="6">
            <el-form-item label="类型">
              <el-radio-group v-model="searchParam.type">
                <el-radio value="6">当班</el-radio>
                <el-radio value="4">当日</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期">
              <el-date-picker v-model="searchParam.date" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD"
                              style="width: 200px"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="deviceName">
      {{ route.query.deviceNo }}
    </div>

    <div class="info-view">
      <div class="title-view">
        设备状态分布
        <div class="icon_box">
          <template v-for="item in icoList">
                    <span class="circle" :style="{ backgroundColor: item.color,
                    borderColor:item.color
                    }"/>
            <span class="ico_text">{{ item.label }}</span>
          </template>
        </div>
      </div>

      <div class="chartBox" style="height: 60px">
        <template v-if="statsArr && statsArr.length">
          <qiePianChart :chart-data="statsArr"/>
        </template>
      </div>
    </div>

    <div class="info-view">
      <div class="title-view">
        设备开动率
      </div>

      <div class="chartBox">
        <template v-if="statsArr">
          <div ref="chartContainer" style="width: 100%;height: 100%"></div>
        </template>
      </div>
    </div>


    <div class="info-view">
      <div class="title-view">
        设备爬坡
      </div>

      <div class="chartBox">
        <template v-if="staticArrPa">
          <div ref="chartContainerPa" style="width: 100%;height: 100%"></div>
        </template>
      </div>
    </div>


    <div class="info-view">
      <div class="title-view">
        设备生产
      </div>

      <div class="chartBox">
        <template v-if="statsArrSh">
          <div ref="chartContainerSh" style="width: 100%;height: 100%"></div>
        </template>
      </div>
    </div>


  </div>
</template>
<script setup>
import moment from 'moment';
import axiosInstance from '@/utils/http/api';
import {Search} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus';
import {onMounted, ref} from 'vue';
import qiePianChart from './echarts/qiePianChart.vue';
import linebarChart from './echarts/linebarChart.vue';
import * as echarts from 'echarts';

onMounted(() => {
  getList();
  getOptions();
});

const paginationParams = ref({pageSize: 18, pageNum: 1});
const pageTotal = ref(0);
const equipmentData = ref([]);
const searchParam = ref({type: '4', date: moment().format('YYYY-MM-DD')});
const infoList = ref([]);
const workRoomList = ref([]);

const chartContainer = ref(null);
const chartContainerPa = ref(null);
const chartContainerSh = ref(null);

const initChart = () => {
  const chartInstance = echarts.init(chartContainer.value);

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Object.keys(staticArr.value)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '设备开动率',
        type: 'line',
        smooth: true,
        data: Object.values(staticArr.value).map(value => parseFloat(value))
      }
    ]
  };

  chartInstance.setOption(option);
};


const initChartPa = () => {
  const chartInstance = echarts.init(chartContainerPa.value);
  const xList = staticArrPa.value.map(item => item.startTime + '-' + item.endTime);
  const yList = staticArrPa.value.map(item => item.yield)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xList
    },
    yAxis: {
      type: 'value',
      data: yList
    },
    series: [
      {
        name: '设备爬坡',
        type: 'line',
        smooth: true,
        data: Object.values(yList).map(value => parseFloat(value))
      }
    ]
  };

  chartInstance.setOption(option);
};

const initChartSh = () => {
  const chartInstance = echarts.init(chartContainerSh.value);
  const xList = staticArrSh.value.map(item => item.time)
  const yList = staticArrSh.value.map(item => item.yield)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xList
    },
    yAxis: {
      type: 'value',
      data: yList
    },
    series: [
      {
        name: '设备生产',
        type: 'bar',
        smooth: true,
        data: Object.values(yList).map(value => parseFloat(value))
      }
    ]
  };

  chartInstance.setOption(option);
};

const icoList = ref([
  {label: '运行', color: '#75d874'},
  {label: '待机', color: '#e0bc78'},
  {label: '报警', color: '#bd6d6c'},
  {label: '停机', color: 'gray'},
  {label: '调试', color: 'gray'}
]);

const statusColor = {
  1: 'rgb(30,190,102)',
  2: 'rgb(255,185,0)',
  5: 'rgb(253,22,60)',
  4: 'rgb(119,119,119)'
};

const statusText = {
  1: '运行',
  2: '待机',
  5: '告警',
  4: '关机'
};

const timeLabels = [
  {key: 'runTime', label: '运行', class: 'running'},
  {key: 'standbyTime', label: '待机', class: 'standby'},
  {key: 'waringTime', label: '告警', class: 'alarm'},
  {key: 'shutdownTime', label: '关机', class: 'close'}
];


const statsArr = ref([]);
const staticArr = ref({});
const staticArrPa = ref({});
const staticArrSh = ref({})
const statsArrSh = ref({});

const getList = () => {
  const param = {
    ...searchParam.value,
    ...{
      deviceId: route.query.deviceId
    }
  };

  // 设备状态分布
  axiosInstance.get('/api/navigation/chart/state', {params: param})
      .then(res => {
        statsArr.value = res.data;
      });


  // 设备开动率
  axiosInstance.get('/api/navigation/dmsDevice/startRateStatistic', {params: {...param, ...{time: param.date}}})
      .then(res => {
        staticArr.value = res.data;
        initChart();
      });

  // 设备爬坡
  axiosInstance.get('/api/navigation/chart/yieldAndBeat', {params: param})
      .then(res => {
        staticArrPa.value = res.data.beatHistory;
        staticArrSh.value = res.data.yieldHistory;

        initChartPa()
        initChartSh()
      });
};


import {useRoute, useRouter} from 'vue-router';

const router = useRouter();
const route = useRoute();


const getOptions = () => {
  axiosInstance.post('/api/basedataOrganization/getAll', {})
      .then(res => {
        if (res.code !== 200) {
          ElMessage.error(res.message);
          return false;
        }
        workRoomList.value = res.data;
      });
};

const handleSizeChange = (e) => {
  paginationParams.value.pageSize = e;
  paginationParams.value.pageNum = 1;
  getList();
};

const handleCurrentChange = (e) => {
  paginationParams.value.pageNum = e;
  getList();
};

const organizationIdChange = (e) => {
  axiosInstance.post('/api/basedataEquipment/getPage', {organizationId: e, current: 1, pageSize: 9999})
      .then(res => {
        if (res.code !== 200) {
          ElMessage.error(res.message);
          return false;
        }
        equipmentData.value = res.data.records;
      });
};
</script>
<style scoped lang="less">
.deviceName {
  padding: 15px;
  font-size: 20px;
  font-weight: 700;
}

.info-view {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;

  .title-view {
    display: flex;
    justify-content: space-between;
  }
}

.icon_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .circle {
    display: inline-block;
    margin: 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 1px solid;
  }
}

.chartBox {
  height: 200px; /* 根据需要调整高度 */
  width: 100%;
}
</style>
